.root {
    width: 400px;
    height: 400px;
    transform-style: preserve-3d;
    transform: rotateX(60deg);

    .firstCircle {
        width: 100%;
        height: 100%;
        border: 1px solid var(--PrimaryColor);
        border-radius: 50%;
        padding: 20px;

        .secondCircle {
            width: 100%;
            height: 100%;
            border: 5px solid var(--PrimaryColor);
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-radius: 50%;
            padding: 20px;
            position: relative;
            animation: rotate1 3s linear infinite;

            .annulusContent {
                width: 100%;
                height: 100%;
                background: repeating-conic-gradient(var(--PrimaryColor) 0,
                        var(--PrimaryColor) 4%,
                        transparent 4%,
                        transparent 5%);
                border-radius: 50%;
                -webkit-mask: radial-gradient(transparent,
                        transparent 50%,
                        #000 50%,
                        #000 100%);
                animation: rotate2 2s linear infinite;
            }
        }
    }

    :global {}
}

@keyframes rotate1 {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(-360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateZ(-360deg);
    }

    100% {
        transform: rotateZ(0deg);
    }
}